<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>print-lock.css">
    <title><%= webpackConfig.name %></title>
    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
    
    <!-- 预加载核心资源 -->
    <link rel="preload" href="<%= BASE_URL %>static/img/logo.png" as="image">
    <link rel="dns-prefetch" href="<%= BASE_URL %>">
    <link rel="preconnect" href="<%= BASE_URL %>">
    <script async src="<%= BASE_URL %>preload.js"></script>
    
    <style>
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
      font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    }
    .chromeframe {
      margin: 0.2em 0;
      background: #ccc;
      color: #000;
      padding: 0.2em 0;
    }

    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
      background-color: #f0f2f5;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .app-logo {
      width: 120px;
      height: 120px;
      margin-bottom: 30px;
      animation: pulse 1.5s infinite ease-in-out;
    }

    @keyframes pulse {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.5);
      }
      
      70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(66, 133, 244, 0);
      }
      
      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
      }
    }

    .loading-content {
      text-align: center;
      max-width: 80%;
    }

    .loading-progress-container {
      width: 300px;
      height: 6px;
      background-color: #e1e1e1;
      border-radius: 3px;
      overflow: hidden;
      margin: 15px auto;
      position: relative;
    }

    .loading-progress-bar {
      height: 100%;
      width: 0%;
      background-color: #1890ff;
      border-radius: 3px;
      transition: width 0.3s ease;
      animation: progress 15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes progress {
      0% { width: 0%; }
      20% { width: 20%; }
      50% { width: 50%; }
      70% { width: 70%; }
      90% { width: 90%; }
      100% { width: 95%; }
    }

    .load_title {
      color: #333;
      font-size: 18px;
      margin-bottom: 8px;
      text-align: center;
    }

    .loading-tips {
      color: #666;
      font-size: 14px;
      text-align: center;
      margin-top: 15px;
    }

    .loading-tip {
      display: none;
      animation: fadeIn 0.5s ease-in-out;
    }

    .loading-tip.active {
      display: block;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="loader-wrapper">
        <img class="app-logo" src="<%= BASE_URL %>favicon.ico" alt="Logo">
        <div class="loading-content">
          <div class="load_title">北化浩绅管理平台</div>
          <div class="loading-progress-container">
            <div class="loading-progress-bar"></div>
          </div>
          <div class="loading-tips">
            <div class="loading-tip active" id="tip1">正在初始化系统资源...</div>
            <div class="loading-tip" id="tip2">加载核心组件...</div>
            <div class="loading-tip" id="tip3">正在准备车辆信息...</div>
            <div class="loading-tip" id="tip3">正在准备用户界面...</div>
            <div class="loading-tip" id="tip4">即将完成...</div>
          </div>
        </div>
      </div>
    </div>
    
    <script>
      // 加载提示轮换显示
      (function() {
        var tips = document.querySelectorAll('.loading-tip');
        var currentTip = 0;
        
        function showNextTip() {
          tips[currentTip].classList.remove('active');
          currentTip = (currentTip + 1) % tips.length;
          tips[currentTip].classList.add('active');
        }
        
        setInterval(showNextTip, 3000);
        
        // 添加页面缓存优化
        if ('serviceWorker' in navigator) {
          // 先检查是否已经存在ServiceWorker注册
          navigator.serviceWorker.getRegistration().then(registration => {
            // 只有在没有已注册的ServiceWorker时才注册新的
            if (!registration) {
              // 直接使用内联服务工作器，避免文件编码问题
              const swContent = `
                // 缓存名称和版本
                const CACHE_NAME = 'bhhs-cache-v2';

                // 只缓存HTTP/HTTPS请求
                self.addEventListener('fetch', event => {
                  // 跳过非http/https请求（包括chrome-extension）
                  if (!event.request.url.startsWith('http')) {
                    return;
                  }
                  
                  // 跳过验证码请求，避免从缓存返回验证码
                  if (event.request.url.includes('captchaImage')) {
                    return fetch(event.request);
                  }
                  
                  event.respondWith(
                    caches.match(event.request)
                      .then(response => {
                        if (response) {
                          return response;
                        }
                        
                        return fetch(event.request)
                          .then(networkResponse => {
                            if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
                              return networkResponse;
                            }
                            
                            const responseToCache = networkResponse.clone();
                            
                            // 安全处理缓存
                            caches.open(CACHE_NAME)
                              .then(cache => {
                                try {
                                  if (event.request.url.startsWith('http')) {
                                    cache.put(event.request, responseToCache);
                                  }
                                } catch (error) {
                                  console.error('缓存错误:', error);
                                }
                              }).catch(error => {
                                console.error('打开缓存失败:', error);
                              });
                            
                            return networkResponse;
                          }).catch(error => {
                            console.error('网络请求失败:', error);
                            return new Response('网络请求失败');
                          });
                      }).catch(error => {
                        console.error('缓存匹配失败:', error);
                        return fetch(event.request);
                      })
                  );
                });
              `;
              
              try {
                // 创建Blob并注册
                const blob = new Blob([swContent], {type: 'text/javascript'});
                const swUrl = URL.createObjectURL(blob);
                
                window.addEventListener('load', function() {
                  navigator.serviceWorker.register(swUrl)
                    .then(function(registration) {
                      console.log('Service Worker 注册成功, 范围:', registration.scope);
                    })
                    .catch(function(err) {
                      console.error('Service Worker 注册失败:', err);
                    });
                });
              } catch (error) {
                console.error('创建Service Worker失败:', error);
              }
            } else {
              console.log('已存在Service Worker注册，跳过注册');
            }
          }).catch(error => {
            console.error('检查Service Worker注册状态失败:', error);
          });
        }
      })();
    </script>
  </body>
</html>
